<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <link rel="stylesheet" href="./test.css">
    </head>
    <body>
        <div class="keyboard">
            <div class="key color1" title="吃披萨">🍕</div>
            <div class="key">
                <span>!</span>
                <span>1</span>
            </div>
            <div class="key">
                <span>@</span>
                <span>2</span>
            </div>
            <div class="key">
                <span>#</span>
                <span>3</span>
            </div>
            <div class="key">
                <span>$</span>
                <span>4</span>
            </div>
            <div class="key">
                <span>%</span>
                <span>5</span>
            </div>
            <div class="key">
                <span>^</span>
                <span>6</span>
            </div>
            <div class="key">
                <span>&amp;</span>
                <span>7</span>
            </div>
            <div class="key">
                <span>*</span>
                <span>8</span>
            </div>
            <div class="key">
                <span>(</span>
                <span>9</span>
            </div>
            <div class="key">
                <span>)</span>
                <span>0</span>
            </div>
            <div class="key">
                <span>_</span>
                <span>-</span>
            </div>
            <div class="key">
                <span>+</span>
                <span>=</span>
            </div>
            <div class="key color1 kl4" title="啃鸡腿">🍖</div>
            <div class="key color3 kl3" title="喝肉汤">🥘</div>
            <div class="key">Q</div>
            <div class="key">W</div>
            <div class="key">E</div>
            <div class="key">R</div>
            <div class="key">T</div>
            <div class="key">Y</div>
            <div class="key">U</div>
            <div class="key">I</div>
            <div class="key">O</div>
            <div class="key">P</div>
            <div class="key">
                <span>{</span>
                <span>[</span>
            </div>
            <div class="key">
                <span>}</span>
                <span>]</span>
            </div>
            <div class="key gc3">
                <span>|</span>
                <span>\</span>
            </div>
            <div class="key color4 kl4" title="兔子爱吃红萝卜">🥕</div>
            <div class="key">A</div>
            <div class="key">S</div>
            <div class="key">D</div>
            <div class="key">F</div>
            <div class="key">G</div>
            <div class="key">H</div>
            <div class="key">J</div>
            <div class="key">K</div>
            <div class="key">L</div>
            <div class="key">
                <span>:</span>
                <span>;</span>
            </div>
            <div class="key">
                <span>"</span>
                <span>,</span>
            </div>
            <div class="key color5 kl4" title="给对象剥个虾">🍤</div>
            <div class="key color6 kl5" title="糖炒板栗">🌰</div>
            <div class="key">Z</div>
            <div class="key">X</div>
            <div class="key">C</div>
            <div class="key">V</div>
            <div class="key">B</div>
            <div class="key">N</div>
            <div class="key">M</div>
            <div class="key">
                <span>&lt;</span>
                <span>,</span>
            </div>
            <div class="key">
                <span>&gt;</span>
                <span>.</span>
            </div>
            <div class="key">
                <span>?</span>
                <span>/</span>
            </div>
            <div class="key color5 kl5" title="小鸡炖蘑菇">🍄</div>
            <div class="key color6 kl3" title="或=嚯啤酒">🍺</div>
            <div class="key color7 kl3" title="爱笑甜甜圈">🍩</div>
            <div class="key color5 kl3" title="来个汉堡">🍔</div>
            <div class="key kl12" title="duang~">duang~</div>
            <div class="key color3 kl3" title="酸溜猕猴桃">🥝</div>
            <div class="key color9" title="不吐籽葡萄">🍇</div>
            <div class="key color9" title="添西瓜">🍉</div>
            <div class="key color7" title="中国面">🍝</div>
        </div>
    </body>
</html>
